<template>
    <div class="answer ">
        <div class="answer-title">
            TA参与的问答 <span>更多>></span>
        </div>
        <div class="answer-text" v-for="i in answerlist" :key="i.id">
            <p>
                <span>问</span>
                <span>{{i.problem}}</span>
            </p>
            <p>
                <span>答</span>
                <span>{{i.answer}}</span>
            </p>
            <div style="clear: both"></div>
        </div>
        <div style="clear: both"></div>
    </div>
</template>

<script>
    export default {
        name: "AnswerList",
        props:['answerlist']
    }
</script>

<style scoped lang="less">
    .answer{
        height:auto;
        border: 1px  solid #e0e0e0;
        margin-top: 30px;
        width: 262px;
        padding: 0 5px 0 5px;
        .answer-text{
            border-top:1px  solid #e0e0e0;
            >:nth-child(2){
                >:first-child{
                    background-color: #64b0fc;
                }
                >:last-child{
                    color:  #64b0fc;
                }
            }
            p{
                padding: 18px 0 0px 0;
                height: auto;
                >:first-child{
                    margin-bottom: 15px;
                    float: left;
                    background-color: #fe5471;
                    border-radius: 4px;
                    padding: 5px;
                    color: white;
                    font-size: 14px;
                    margin-left: 0;
                }
                >:last-child{
                    margin-bottom: 15px;
                    color: #fe5471;
                    margin-left: 20px;
                    float: left;
                    width: 200px;
                }
            }
        }
        .answer-title{
            height: 53px;
            line-height: 53px;
            font-size: 18px;
            color: #333333;
            padding-left: 20px;
            span{
                float: right;
                color: #ff5172;
                font-size: 12px;
                margin-right: 10px;
            }

        }
        .answer-title:before{
            content: '';
            width: 3px;
            height: 22px;
            background-color: #FE5371;
            position: absolute;
            top: 15px;
            left: 5px;
        }
    }
</style>